<template>
	<view>
        <wlk-navbar :isShowSearch="item.params.title=='hidden'?false:true" :fontColor="item.style.titleColor" :transparentTitleColor="item.style.titleColor" :bgColor="item.style.navColor" :scrollTop="scrollTop" :navbarType="item.params.mode=='into'?5:0">
            <view class="wlkflex" slot="left">
                <view class="actName u-line-1" :style="'color: '+item.style.titleColor">{{item.params.title}}</view>
            </view>
            <view class="wlkflex search-box" slot="right">
                <view class="search-item relative" v-if="item.params.search=='normal'">
                    <u-search bgColor="rgba(0,0,0,0.18)"
                              :searchIconColor="item.style.titleColor"
                              :placeholderColor="item.style.titleColor"
                              :inputStyle="inputStyle" placeholder="目的地" disabled :showAction="false"></u-search>
                  <view class="search-jump" @click="jump('/pages/line/search')"></view>
                </view>
            </view>
        </wlk-navbar>
    </view>
</template>

<script>
    import { toUrl } from '@/wlkutils/tools';
	export default {
		name:"wlk-topNav",
        data() {
            return {
                title:'',
                inputStyle:{backgroundColor:''},
            };
        },

        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            },
            scrollTop:{
                type:Number,
                default:0,
                required: true,
            },
            systemInfo: {
                type: Object,
                default: ()=> {
                    return {}
                }
            }
        },
        created:function(e){
		    this.setNavStyle()
        },
        watch: {
            scrollTop(v) {
                if(v>0 && this.item.params.search == 'hidden'){
                    this.title = this.item.params.title;
                }else{
                    this.title = '';
                }
            }
        },
        methods: {
            setNavStyle(){
                if(this.item.params.search != 'normal' && this.item.params.mode!='into'){
                    this.title = this.item.params.title;
                }
            },
            jump(path){
                toUrl(path);
            }
        }
	}
</script>

<style lang="scss" scoped>
    .actName{
        max-width: 300rpx;
        font-size: 34rpx;
        padding-left: 5rpx;
    }
    .search-box{
        /*  #ifndef MP-WEIXIN */
            justify-content: center;
        /*  #endif  */
        .search-item{
            width: 50%;
          .search-jump{
            position: absolute;
            z-index: 99;
            width: 92%;
            top: 0;
            left: 4%;
            height: 60rpx;
            border-radius: 40rpx;
          }
        }
    }

</style>